<template>
    <div class="newinfo-box">
        <!-- 这是详情模块 -->
        <div class="detail-box">
            <div class="tit">{{newsinfo.title}}</div>
            <div class="subtit">
                <div class="time">{{newsinfo.add_time | dateformat}}</div>
                <div class="clicknum">{{newsinfo.click}}次</div>
            </div>
            <div class="content" v-html=newsinfo.content></div>
        </div>
        <!-- 评论模块 -->
        <comment-box :artid="this.id"></comment-box> 
    </div>
</template>

<script>
import { Toast } from "mint-ui";
import commentbox from '../subcomponents/comments.vue'
export default {
    data(){
        return {
            id:this.$route.params.id,
            newsinfo:{}
        }
    },
    created(){
        this.getNewsInfo(this.id)
    },
    methods:{
        getNewsInfo(id){
            this.$http.get('api/getnew/'+id).then(result => {
                if(result.body.status == 0){
                    this.newsinfo = result.body.message["0"];
                }else{
                    Toast("获取新闻失败！");
                }
            })
        }
    },
    components:{
        "comment-box": commentbox
    }
}
</script>

<style lang="scss" scope>
    .tit{
        color: red;
    }
    .subtit{
        display: flex;
        justify-content: space-around;
        .time{
            color: #226aff
        }
        .clicknum{
            color: #226aff
        }
    }
    .newinfo-box{
        padding-bottom: 50px;
    }
</style>